<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>

    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
    

        /* 图层控件层样式设置 */
        .layerControl {
            position: absolute;
            bottom: 5px;
            width: 200px;
            height: 160px;
            right: 10px;
            top: 5px;
            /*在地图容器中的层，要设置z-index的值让其显示在地图上层*/
            z-index: 2001;
            color: #ffffff;
            background-color: #4c4e5a;
            /*边缘的宽度*/
            border-width: 10px;
            /*圆角的大小 */
            border-radius: 10px;
            /*边框颜色*/
            border-color: #000 #000 #000 #000;
        }

        #preview
        {
            height: 100px;
            width: 100px;
            position: absolute;
            display: none;
            text-align: center; 
            font-weight: bold;
            left: 50%;
            right: 0;
            top:50%;
            bottom:0;
            margin-left: -50px;
            margin-right: auto;
            margin-top:-50px;
            margin-bottom:auto;
            z-index: 1000;
        }
        .hrClass{
            width: 99%;
            background: white;
            height: 0.1px;
            margin-block-start: 2px;
            margin-block-end: 2px;
            border-width: 0.5px;
        }
        .title
        {
            text-align: center;
            height: 28px;
            line-height: 28px;
            letter-spacing: 1px;
        }
        .labelClass{
            position: relative;
            font-size: 14px;
            margin: 10px 10px;
            top: 5px;
        }
        
        .btnClass{
            position: absolute;
            bottom: 5px;
            width: 80px;
            color: #eee;
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid transparent;
            border-color: #eee;
            border-radius: 3px;
            background-image: none;
            background-color: transparent;
        }
        .btnClass:hover{
            cursor:pointer;
            color: #0075C7;
            border-color: #0075C7;
        }
        .btnInputClass{
            position: absolute;
            width: 130px;
            margin: 4px -5px;
            color: #eee;
            display: inline-block;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            border: 1px solid transparent;
            border-color: #eee;
            border-radius: 3px;
            background-image: none;
            background-color: transparent;
        }


       
    </style>

    <script type="text/javascript">
       
        var map = null;
        var drawLayer = null;
        var drawSource = null;
        function init() {
            var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥
            //加载天地图瓦片图层数据
            var TiandiMap_vectIGS = new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.VEC_IGS,
                projection: ol.proj.get('EPSG:4326'),
                //最小显示等级
                minZoom: 0,
                //最大显示等级
                maxZoom: 15,
                ip: "develop.smaryun.com",
                port: "6163",    //访问IGServer的端口号，.net版为6163，Java版为8089,
                //天地图key
                token: tdk,
            });
            
            var TiandiMap_ciaIGS =new Zondy.Map.TianDiTu({
                layerType: Zondy.Enum.Map.TiandituType.CVA_IGS,
                projection: ol.proj.get('EPSG:4326'),
                minZoom: 0, //最小显示等级               
                maxZoom: 15, //最大显示等级
                ip: "develop.smaryun.com",
                port: "6163",    //访问IGServer的端口号，.net版为6163，Java版为8089,
                //天地图key
                token: tdk,
            });

            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: [110, 30],
                    zoom: 4,
                    projection: 'EPSG:4326'
                }),
                layers:[TiandiMap_vectIGS,TiandiMap_ciaIGS]
            });

            //添加绘制图层
            drawSource = new ol.source.Vector({
                wrapX: false
            });
            drawLayer = new ol.layer.Vector({
                source: drawSource,
                style: new ol.style.Style({
                    //填充色
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 0, 0, 0.5)'
                    }),
                    //边线样式
                    stroke: new ol.style.Stroke({
                        color: 'rgba(255,204, 51, 1)',
                        width: 1
                    })
                })
            });
            map.addLayer(drawLayer);
        }
        
        function GeomQuery(geomOL,geomZD)
        {
            drawSource.clear();
             //显示进度条
             startPressBar();
            drawSource.addFeatures([geomOL]);

            //初始化查询结构对象，设置查询结构包含几何信息
            var queryStruct = new Zondy.Service.QueryFeatureStruct();
            //是否包含几何图形信息
            queryStruct.IncludeGeometry = true;
            //是否包含属性信息
            queryStruct.IncludeAttribute = true;
            //是否包含图形显示参数
            queryStruct.IncludeWebGraphic = false;
            //指定查询规则
            var rule = new Zondy.Service.QueryFeatureRule({
                //是否将要素的可见性计算在内
                EnableDisplayCondition: false,
                //是否完全包含
                MustInside: false,
                //是否仅比较要素的外包矩形
                CompareRectOnly: false,
                //是否相交
                Intersect: true
            });
            //实例化查询参数对象
            var queryParam = new Zondy.Service.QueryParameter({
                r: Math.random(),
                geometry: geomZD,
                resultFormat: "json",
                struct: queryStruct,
                rule: rule
            });
            //设置查询分页号
            queryParam.pageIndex = 0;
            //设置查询要素数目
            queryParam.recordNumber = 20;
            //实例化地图文档查询服务对象
            var queryService = new Zondy.Service.QueryDocFeature(queryParam, "WorldJWVector", "1", {
                ip: "develop.smaryun.com",
                port: "6163"    //访问IGServer的端口号，.net版为6163，Java版为8089
            });
            //执行查询操作，querySuccess为查询回调函数
            queryService.query(querySuccess, queryError);
        }
      
        function pntQuery()
        {
            //创建一个用于查询的点形状
            var pointObj = new Zondy.Object.Point2D(114, 30);
            //设置查询点的搜索半径
            pointObj.nearDis = 0.001;
            //将点添加到地图进行显示（非必需，仅仅为了在地图上高亮显示图形）
            var point = new ol.Feature({
                geometry: new ol.geom.Point([114, 30])
            });
            //设置点的样式信息
            point.setStyle(new ol.style.Style({
                //形状
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({
                        color: 'blue'
                    })
                })
            }));

            GeomQuery(point,pointObj);
        }

        function lineQuery()
        {
            //创建一个用于查询的线形状
            var pointObj = new Array();
            pointObj[0] = new Zondy.Object.Point2D(114.27922, 30.57249);
            pointObj[1] = new Zondy.Object.Point2D(109.98000, 40.65000);
            pointObj[2] = new Zondy.Object.Point2D(106.91235, 47.92859);
            var polyLine = new Zondy.Object.PolyLine(pointObj);
            //将线几何添加到地图进行显示（非必需，仅仅为了在地图上高亮显示图形）
            var points = [];
            for (var i = 0; i < polyLine.pointArr.length; i++) {
                var ring = polyLine.pointArr;
                var point = [ring[i].x, ring[i].y];
                points.push(point);
            }
            //创建一条线
            var line = new ol.Feature({
                geometry: new ol.geom.LineString(points)
            });
            //设置线的样式
            line.setStyle(new ol.style.Style({
                //边线样式
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                })
            }));
            GeomQuery(line,polyLine);
        }

        function polygonQuery()
        {       
            //创建一个用于查询的多边形
            var pointObj = new Array();
            pointObj[0] = new Zondy.Object.Point2D(103.5995, 36.1134);
            pointObj[1] = new Zondy.Object.Point2D(117.18523, 39.1284);
            pointObj[2] = new Zondy.Object.Point2D(115.8894, 28.6712);
            pointObj[3] = new Zondy.Object.Point2D(102.7021, 25.0510);
            pointObj[4] = new Zondy.Object.Point2D(103.5995, 36.1134);
            var Polygon = new Zondy.Object.Polygon(pointObj);
            //将多边形几何添加到地图进行显示（非必需，仅仅为了在地图上高亮显示图形）
            var points = [];
            for (var i = 0; i < Polygon.pointArr.length; i++) {
                var ring = Polygon.pointArr;
                var point = [ring[i].x, ring[i].y];
                points.push(point);
            }
            //创建一个多边形
            var PolygonOL = new ol.Feature({
                geometry: new ol.geom.Polygon([points])
            });
            //设置区样式信息
            PolygonOL.setStyle(new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.2)'
                }),
                //边线样式
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                })
            }));

            GeomQuery(PolygonOL,Polygon);
        }

        function squareQuery()
        {
            //根据圆获取多边形
            var Circle = new ol.geom.Circle([116.4375, 41.53125], 10);
            var polygonOL =  new ol.geom.Polygon.fromCircle(Circle, 4, 150);
            var Square = new ol.Feature({
                geometry: polygonOL
            });

            Square.setStyle(new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.8)'
                }),
                //边线颜色
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                //形状
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            }));
            var pntsArr = polygonOL.getCoordinates()[0];
            var pointObj = new Array();
            for(var i=0;i<pntsArr.length;i++)
            {
                pointObj.push(new Zondy.Object.Point2D(pntsArr[i][0], pntsArr[i][1]))
            }
            var Polygon = new Zondy.Object.Polygon(pointObj);
            GeomQuery(Square,Polygon);
        }

        function circleQuery()
        {
            //创建一个用于查询的圆
            var pointObj = new Zondy.Object.Point2D(116.4375, 41.53125);
            var circleObj = new Zondy.Object.Circle(pointObj, 5);
            //将圆几何添加到地图进行显示（非必需，仅仅为了在地图上高亮显示图形）
            var Circle = new ol.Feature({
                geometry: new ol.geom.Circle([116.4375, 41.53125], 5)
            });
            //设置圆的样式信息
            Circle.setStyle(new ol.style.Style({
                //填充色
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.2)'
                }),
                //边线样式
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 2
                })
            }));
            GeomQuery(Circle,circleObj);
        }

        function deleteAll()
        {
           if(drawSource!=null)
           {
             drawSource.clear();
           }
        }

        //查询失败回调
        function queryError(e) {
            //停止进度条
            stopPressBar();
        }

        //查询成功回调
        function querySuccess(result) {
            //停止进度条
            stopPressBar();
            //初始化Zondy.Format.PolygonJSON类
            var format = new Zondy.Format.PolygonJSON();
            //将MapGIS要素JSON反序列化为ol.Feature类型数组
            var features = format.read(result);

            //添加要素到绘制图层          
            drawSource.addFeatures(features);
            map.setView(new ol.View({
                center: [110, 30],
                zoom: 4,
                projection: 'EPSG:4326'
            }));
        }

        //清除客户端查询结果信息
        function clearA() {
            //停止进度条
            stopPressBar();
            if (drawLayer) {
                //移除高亮显示结果图层drawLayerr
                map.removeLayer(drawLayer);
            }
            else
                return;
        }
        /*===========================================进度条===================================================*/
        //停止进度条
        function stopPressBar() {
            document.getElementById("preview").style.display = "none";
        }
        //开始进度条动画
        function startPressBar() {
            document.getElementById("preview").style.display = "block";
        }
       
      
    </script>
</head>
<body onload="init()">
    <div id="mapCon">
        <div id="preview">
            <img src="static/assets/graphic-image/39-1.gif" alt='' /><br />
            <br />
            <span>正在查询，请稍候</span>
        </div>
    </div>
    <div id="menuContain" class='menuContain'>
        <div id="tool-container">
         <div id='dataSourceMenuID'  class="optmain"  status="unactive" onclick="switchMenuStatus(this,'menu1')">
             <span></span><i class="menuGroup">几何查询</i><em></em>
         </div>
      
        </div>
    </div>
    <div id="menu1" class="menuStrip" style='display:none' >
        <ul  class="menuItems">
            <li   onclick="pntQuery()"><span class="item1"></span><i >点</i>
            </li>
            <li  onclick="lineQuery()"><span class="item1"></span><i >线</i>
            </li>
            <li   onclick="polygonQuery()"><span class="item1"></span><i >多边形</i>
            </li>
            <li   onclick="squareQuery()"><span class="item1"></span><i >正方形</i>
            </li>
            <li   onclick="circleQuery()"><span class="item1"></span><i >圆</i>
            </li>
            <li class="divider"></li>
            <li  onclick="deleteAll()"><span class="item3"></span><i>清空</i>
            </li>
        </ul>
    </div>

 <script>
    function switchMenuStatus(div, menuitemFrameID) {
        var temDivs = document.getElementsByClassName('optmain');
        if (temDivs.length > 0) {
            for (var i = 0; i < temDivs.length; i++) {
                if (temDivs[i] === div) {
                    var status = div.getAttribute("status");
                    if (status == "unactive") {
                        div.setAttribute("status", "active");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "active";
                        tem_ems[0].className = "active";

                        //显示菜单项
                        DisplayMenuItem(true, menuitemFrameID);

                    }
                    else {
                        div.setAttribute("status", "unactive");
                        var tem_spans = div.getElementsByTagName("span");
                        var tem_ems = div.getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";

                        //隐藏菜单项
                        DisplayMenuItem(false, menuitemFrameID);
                    }
                }
                else {
                    var status = temDivs[i].getAttribute("status");
                    if (status == "active") {
                        temDivs[i].setAttribute("status", "unactive");
                        var tem_spans = temDivs[i].getElementsByTagName("span");
                        var tem_ems = temDivs[i].getElementsByTagName("em");
                        tem_spans[0].className = "";
                        tem_ems[0].className = "";
                    }
                }
            }
        }
    }

    function DisplayMenuItem (isDisplay, iframeID) {
        var menuItemFrame = document.getElementById(iframeID);
        if (menuItemFrame != null) {
            if (isDisplay) {
                var temDivs = document.getElementsByClassName('menuStrip');
                if (temDivs.length > 0) {
                    for (var i = 0; i < temDivs.length; i++) {
                        if (temDivs[i] != menuItemFrame) {
                            temDivs[i].style.display = "none";
                        }
                    }   
                }
                menuItemFrame.style.display = "";
            }
            else {
                menuItemFrame.style.display = "none";
            }
        }
    };
 </script>
</body>

</html>